const option = {
    title: [
        {
            text: '检测进度',
            x: 'center',
            top: '46%',
            textStyle: {
                fontSize: 16,
                fontWeight: '300',
                color: 'rgba(255, 255, 255, 0.3)',
            }
        },
        {
            text: '60%',
            x: 'center',
            top: '30%',
            textStyle: {
                fontSize: 30,
                fontWeight: '300',
                color: '#fff',
            }
        }
    ],
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
        textStyle: {
            fontSize: 10
        },
    },
    color: ['#45494b', '#32b16c'],
    legend: {
        orient: 'vertical',
        left: 'center',
        bottom: 0,
        data: ['总应检样本数：15000,000,00', '已检测人员数：800,000,00'],
        textStyle: {
            color: '#fff'
        },
        itemGap: 15,
        itemWidth: 3,
        itemHeight: 15,
        align: 'auto',
        textStyle: {
            color: '#fff',
        }
    },
    angleAxis: {
        max: 100,
        show: false
    },
    radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
            show: false
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false
        }
    },
    polar: {
        radius: ["58%", "70%"],
        center: ['50%', '40%']
    },
    color: ["#2478b6", "#c2572d", "#66CCCC"],
    series: [
        {
            name: '总应检样本数：15000,000,00',
            type: 'bar',
            coordinateSystem: "polar",
            data: [100],
            barGap: '-100%',
            itemStyle: {
                color: '#45494b'
            }
        }, {
            name: '已检测人员数：800,000,00',
            type: 'bar',
            roundCap: true,
            coordinateSystem: "polar",
            data: [60],
            itemStyle: {
                color: '#32b16c'
            }
        }
    ]
}
function create() {
    const config = {
        name: '',
        type: 'custom',
        coordinateSystem: "none",
        data: [0],
    }
    const paramsArr = [{
        r: 0.75,
        startAngle: 230,
        endAngle: 50,
        lineWidth: 2
    }, {
        r: 0.75,
        startAngle: 60,
        endAngle: 220,
        lineWidth: 2
    }, {
        startAngle: 230,
        endAngle: 250
    }, {
        startAngle: 200,
        endAngle: 220
    }, {
        startAngle: 30,
        endAngle: 50
    }, {
        startAngle: 60,
        endAngle: 80
    }];
    paramsArr.forEach(item => {
        const data = {
            ...config,
            renderItem: function (params, api) {
                return {
                    type: 'arc',
                    style: {
                        stroke: '#56595a',
                        fill: 'transparent',
                        lineWidth:item.lineWidth?item.lineWidth:5
                    },
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2 - 28,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * (item.r?item.r:0.74),
                        startAngle: (item.startAngle) * Math.PI / 180,
                        endAngle: (item.endAngle) * Math.PI / 180
                    },
                }
            }
        };
        option.series.push(data);
    })

}
create();

export default option;



export function handlerOptions(chart, newConfig) {
    if (newConfig && (Object.keys(newConfig).length !== 0)) {
        chart.setOption({ ...newConfig }, false);
        console.log(chart.getOption());
    }
}